<template>
        <!-- 列表页面 -->
        <div class="container" v-if="!showEdit && !showAdd">
            <div class="header">
                <div class="title plus">
                    <span>bannerItem列表</span>
                    <el-button type="primary" plain style="margin-left: 30px;" @click="handleAdd">添加bannerItem</el-button>
                </div>
            </div>
            <!-- 表格 -->
            <el-table
                border
                v-loading="loading"
                :data="tableData"
                stripe>
                <el-table-column label="图片">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px;"
                                :src="scope.row.img.url"
                                fit="contain"></el-image>
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="type_name"-->
<!--                        label="类型">-->
<!--                </el-table-column>-->
                <el-table-column label="操作" fixed="right" width="170">
                    <template slot-scope="scope">
                        <el-button
                                v-for="(item,index) in operate"
                                :type="item.type"
                                plain
                                size="mini"
                                :key="index"
                                @click.native.prevent.stop="buttonMethods(item.func, scope.$index, scope.row)"
                        >{{item.name}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 编辑页面 -->
        <banner-item-edit v-else-if="showEdit" @editClose="editClose" :editBannerItemID="editBannerItemID"></banner-item-edit>
        <!-- 添加页面 -->
        <banner-item-add v-else @addClose="addClose" :bannerId="bannerId" :orderSort="orderSort"></banner-item-add>
</template>
<script>
import banner from '@/models/banner'
import BannerItemEdit from './BannerItemEdit'
import BannerItemAdd from './BannerItemAdd'

export default {
  components: { BannerItemEdit, BannerItemAdd },
  data() {
    return {
      tableData: [],
      operate: [],
      loading: false,
      showEdit: false,
      showAdd: false,
      editBannerItemID: 1,
      bannerId: 1,
      orderSort: 1,
    }
  },
  created() {
    this.loading = true
    this.bannerId = Number(this.$route.params.id)
    this.getBannerInfo()
    this.operate = [
      { name: '编辑', func: 'handleEdit', type: 'primary' },
      { name: '删除', func: 'handleDelete', type: 'danger' },
    ]
    this.loading = false
  },
  methods: {
    async getBannerInfo() {
      const banner_info = await banner.getBanner(this.$route.params.id)
      this.tableData = banner_info.items
    },
    // 操作列
    buttonMethods(func, index, row) {
      const self = this
      const { methods } = this.$options
      methods[func](self, index, row)
    },
    handleEdit(self, index, val) {
      // eslint-disable-next-line no-param-reassign
      self.showEdit = true
      // eslint-disable-next-line no-param-reassign
      self.editBannerItemID = val.id
    },
    handleAdd() {
      if (this.tableData.length > 0) {
        this.orderSort = this.tableData[0].order_sort + 1
      }
      this.showAdd = true
    },
    handleDelete(self, index, val) {
      self.$confirm('此操作将永久删除该bannerItem, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const info = {
          ids: [val.id],
        }
        const res = await banner.delectBanner(info)
        if (res.error_code === 0) {
          self.getBannerInfo()
          self.$message({
            type: 'success',
            message: `${res.msg}`,
          })
        }
      })
    },
    editClose() {
      this.showEdit = false
      this.getBannerInfo()
    },
    addClose() {
      this.showAdd = false
      this.getBannerInfo()
    },
  },
}
</script>

<style lang="scss" scoped>
    .container {
        padding: 0 30px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                height: 59px;
                line-height: 59px;
                color: $parent-title-color;
                font-size: 16px;
                font-weight: 500;
            }
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
</style>
